<template>
  <div class="person-container">
    <!-- 搜索区域 -->
    <div>
      单位：
      <el-select
        v-model="rankingList.archDeptName"
        size="small"
        placeholder="请选择"
        style="width: 100px"
      >
        <el-option
          v-for="item in archDeptForm"
          :key="item.archDeptId"
          :label="item.archDeptName"
          :value="item.archDeptName"
        />
      </el-select>
      知识体系：
      <el-select
        v-model="rankingList.knowCateName"
        size="small"
        placeholder="请选择"
        filterable
      >
        <el-option
          v-for="item in knowCateForm"
          :key="item.knowCateId"
          :label="(item.cateId?item.cateId+'_':'')+item.knowCateName"
          :value="item.knowCateName"
        />
      </el-select>
      统计类型：
      <el-select v-model="timeType" size="small">
        <el-option label="不限" value="0" />
        <el-option label="按年" value="1" />
        <el-option label="按月" value="2" />
        <el-option label="按日" value="3" />
      </el-select>
      选择时间：
      <el-date-picker
        v-if="timeType === '0'"
        size="small"
        type=""
        :editable="false"
      />
      <el-date-picker
        v-if="timeType === '1'"
        v-model="timeTypeForm.year"
        size="small"
        type="year"
        value-format="yyyy"
        placeholder="选择年"
        :editable="false"
      />
      <el-date-picker
        v-if="timeType === '2'"
        v-model="timeTypeForm.month"
        size="small"
        type="month"
        value-format="yyyy-MM"
        placeholder="选择月"
        :editable="false"
      />
      <el-date-picker
        v-if="timeType === '3'"
        v-model="timeTypeForm.day"
        size="small"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择日"
        :editable="false"
      />
      <el-button
        size="small"
        type="primary"
        style="margin-left: 10px"
        @click="getTable"
      >查询</el-button>
    </div>
    <!-- 图表区域 -->
    <div style="margin-top: 20px">
      <!-- 知识发布统计图 -->
      <div style="width: 100%; height: 300px; margin: auto">
        <bar-Chart v-if="chartData.xData.length > 0" :chart-data="chartData" />
      </div>

      <!-- 知识发布表格 -->
      <div>
        <div style="float: right; padding: 15px">
          <el-button
            size="small"
            type="primary"
            @click="exportForm"
          >导出</el-button>
        </div>
        <el-table
          :data="tableData"
          style="width: 100%"
          border
        >
          <el-table-column prop="rank" align="center" label="序号" />
          <el-table-column prop="knowCateName" align="center" label="知识体系" />
          <el-table-column prop="period" align="center" label="发布时间" />
          <el-table-column prop="archDeptName" align="center" label="单位名称" />
          <el-table-column prop="staffName" align="center" label="员工姓名" />
          <el-table-column prop="sum" align="center" label="发布量" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getArchDeptApi, getKnowCategoryApi, getTableApi, exportApi } from '@/api/knowMan'
// import { getArchDeptApi, getKnowCategoryApi, getTableApi, exportApi } from '@/api/reportApi'
import barChart from './barChart.vue'

export default {
  components: {
    barChart
  },
  data() {
    return {
      rankingList: {
        // 解决placeholder不显示问题
        archDeptName: '全部',
        knowCateName: '全部',
        period: null
      },
      timeType: '0',
      timeTypeForm: {
        year: '',
        month: '',
        day: ''
      },

      // 调用接口数据
      archDeptForm: [],
      knowCateForm: [],

      personData: {},
      chartData: {
        chartTitle: '个人知识发布量统计',
        xData: [],
        yData: []
      },

      tableData: []
    }
  },
  created() {
    this.getArchDept()
    this.getKnowCategory()
    this.getTable()
  },
  methods: {
    getArchDept() {
      getArchDeptApi().then((res) => {
        if (res.code === 200) {
          const list = [
            {
              archDeptName: '全部',
              archDeptId: ''
            }
          ]
          this.archDeptForm = list.concat(res.list)
        }
      })
    },
    getKnowCategory() {
      getKnowCategoryApi().then((res) => {
        if (res.code === 200) {
          const list = [{
            cateId: '',
            knowCateId: '全部',
            knowCateName: '全部'
          }]
          this.knowCateForm = list.concat(res.list)
        }
      })
    },
    getTable() {
      if (this.timeType === '1') this.period = this.timeTypeForm.year
      else if (this.timeType === '2') this.period = this.timeTypeForm.month
      else if (this.timeType === '3') this.period = this.timeTypeForm.day

      // 初始化数据
      this.chartData.xData = []
      this.chartData.yData = []
      const param = {
        ArchDeptName: this.rankingList.archDeptName === '全部' ? '' : this.rankingList.archDeptName,
        KnowCateName: this.rankingList.knowCateName,
        TimeType: this.timeType,
        period: this.period
      }

      getTableApi(param).then((res) => {
        if (res.code === 200) {
          this.personData = res.list
          this.tableData = res.list
          for (let i = 0; i < this.personData.length; i++) {
            this.chartData.xData[i] = this.personData[i].staffName
            this.chartData.yData[i] = this.personData[i].sum
          }
        }
      })
    },
    // 订单导出
    exportForm() {
      const param = {
        ArchDeptName: this.rankingList.archDeptName, KnowCateName: this.rankingList.knowCateName, TimeType: this.timeType, period: this.period
      }
      exportApi(param).then((res) => {
        if (res.code === 200) {
          const link = document.createElement('a')// 创建a标签
          const blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=UTF-8' }) // 设置文件类型
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob) // 创建URL
          link.setAttribute('download', '个人知识发布量统计表.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        }
      })
    }
  }
}
</script>

<style scoped>
.person-container {
  padding: 15px;
  margin: 0;
  height: calc(100vh - 51px);
  overflow-y: auto;
  background-color: #f5f7fd;
  font-size: 14px;
}

.el-header {
  padding: 0 30px;
  margin: 0;
  height: 60px;
  background-color: #fff;
}

.el-form-item {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.el-main {
  margin-top: 15px;
  background-color: #fff;
}
</style>
